iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
0
自我挑戰組

輕鬆Vue一下系列 第 15

Day15-匯率計算機(css)

  • 分享至 

  • xImage
  •  

完成網頁的設計後,接下來就是網頁外觀的部分,在這裡就大概做一個簡單的介紹:
https://ithelp.ithome.com.tw/upload/images/20190930/20112076kBsV2EFrkB.jpg
1.利用rate_boxoriginalchang這三個類別將計算機顯示框的外觀進行控制,如下:
https://ithelp.ithome.com.tw/upload/images/20190930/20112076F2a4H233Ga.jpg


https://ithelp.ithome.com.tw/upload/images/20190930/20112076WChmRYBHvP.jpg
2.接著再藉由button_boxinput_btn這兩個類別將計算機按鈕的外觀進行控制,而數字鍵以外的按鈕則另外加上switchfunc類別為了控制其按鈕顏色,如下:
https://ithelp.ithome.com.tw/upload/images/20190930/20112076UwiqZzVPpX.jpg
計算機的外觀就這樣做好了/images/emoticon/emoticon12.gif
明日預告:匯率計算機(javascript)


上一篇
Day14-匯率計算機(html)
下一篇
Day16-匯率計算機(vue.js)
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言